<template>
    <!-- <view class="mine" style="background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/bg/bg-1.png);"> -->
    <view class="mine">
        <view class="header">
            <image
                src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                :draggable="false"
                mode="scaleToFill"
                class="img-1"
            ></image>
            <view class="header-phone">{{ phone }}</view>
        </view>
        
        <view
            class="box-3"
            @click="popup2.open()"
        >
            <image
                :src="integralImg" 
                :draggable="false"
                mode="scaleToFill"
                class="img-3"
            ></image>
            <view class="box-3-text-1">{{integralText}}</view>
            <!-- <view>积分余额：{{ integral }}</view> -->
        </view>
        <view class="box-1">
            <uni-grid
                :column="4" 
                :showBorder="false" 
                :square="true"
            >
                <uni-grid-item 
                    v-for="(item, index) in functionArr" 
                    :key="'1-' + index"
                >
                    <view 
                        class="function-item-box" 
                        @click="routerPush(item)"
                    >
                        <view 
                            class="iconfont icon-2"
                            :class="[item.imgurl]"
                        ></view>
                        <text class="function-item-box-text-1">{{ item.name }}</text>
                    </view>
                </uni-grid-item>
                <!-- 分享 -->
                <!-- <uni-grid-item>
                    <button 
                        open-type="share"
                        class="function-item-box btn-text"
                    >
                        <view
                            class="iconfont icon-2"
                            :class="['icon-zhuanfa']"
                        ></view>
                        <text class="function-item-box-text-1" style="margin-top: 24rpx;">分享</text>
                    </button>
                </uni-grid-item> -->
            </uni-grid>
        </view>
        <view class="box-2">
            <uni-list :border="true">
                <uni-list-item
                    v-for="(item, index) in itemList"
                    :key="'2-' + index"
                    :title="item.name"
                    :rightText="item.rightText"
                    note=""
                    :thumb="item.imgurl"
                    thumbSize="sm"
                    showArrow
                    clickable
                    @click="routerPush(item)"
                >
                    <template v-slot:header>
                        <view
                            class="iconfont icon-3"
                            :class="[item.imgurl]"
                        ></view>
                    </template>
                    <!-- <template v-slot:header>
                    </template>
                    <template v-slot:body>
                    </template>
                    <template v-slot:footer>
                    </template> -->
                </uni-list-item>
            </uni-list>
        </view>
        <uni-popup
            ref="popup1" 
            type="center"
            :is-mask-click="true"
        >
            <view class="my-popup-box-1">
                <!-- <view class="my-popup-box-1-title">救道转运邀请码</view> -->
                <image
                    :src="qrcodeImg" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="img-4"
                ></image>
                <!-- <uqrcode 
                    ref="qrcode" 
                    canvas-id="qrcode" 
                    :value="qrcodeUrl" 
                    :size="500"
                    sizeUnit="rpx"
                    :start="false"
                    auto
                />
                <view class="my-popup-box-1-text">聚焦民生服务大众，救道转运使命必达</view> -->
                
                <button 
                    type="default"
                    @click="saveImageToPhotosAlbum"
                >
                    保存到相册
                </button>
            </view>
        </uni-popup>
        <uni-popup
            ref="popup2" 
            type="center"
            :is-mask-click="true"
        >
            <view class="my-popup-box-2">
                <view class="my-popup-box-2-img">
                    <view class="my-popup-box-2-img-text">会员等级详情</view>
                </view>
                <view class="my-popup-box-2-content">
                    <view class="my-popup-box-2-content-text-1">
                        <image
                            src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-bronze.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="my-popup-box-2-content-text-1-img"
                        ></image>
                        <view>青铜会员：积分大于或等于0小于1000</view>
                    </view>
                    <view class="my-popup-box-2-content-text-1">
                        <image
                            src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-silver.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="my-popup-box-2-content-text-1-img"
                        ></image>
                        <view>白银会员：积分大于或等于1000小于10000</view>
                    </view>
                    <view class="my-popup-box-2-content-text-1">
                        <image
                            src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-gold.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="my-popup-box-2-content-text-1-img"
                        ></image>
                        <view>黄金会员：积分大于或等于10000小于100000</view>
                    </view>
                    <view class="my-popup-box-2-content-text-1">
                        <image
                            src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-platinum.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="my-popup-box-2-content-text-1-img"
                        ></image>
                        <view>铂金会员：积分大于或等于100000</view>
                    </view>
                    <!-- <view  class="my-popup-box-2-content-text-bottom-border"></view> -->
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
    import { getCurrentInstance, markRaw, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { smsSendVcApi, userRegisterApi, wxUserInfoApi, createInvitationCodeApi } from '@/apis/index'
    const phone = uni.getStorageSync('storagePhone')
    const integral: Ref<number> = ref(0)
    const integralImg: Ref<string> = ref('https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-bronze.png')
    const integralText: Ref<string> = ref('青铜会员')
    const popup1: Ref<any> = ref(null)
    const popup2: Ref<any> = ref(null)
    // const qrcode: Ref<any> = ref(null)
    // const qrcodeUrl: Ref<string> = ref('')
    const qrcodeImg: Ref<string> = ref('')
    const functionArr = reactive([
        {
            name: '转运订单',
            path: '/pages/transferOrder/transferOrder',
            imgurl: 'icon-dingdan',
        },
        {
            name: '商城订单',
            path: '/pages/mallOrders/mallOrders',
            imgurl: 'icon-dingdan1',
        },
        {
            name: '优惠券',
            path: '/pages/coupon/coupon',
            imgurl: 'icon-youhuiquan',
        },
        {
            name: '邀请',
            path: '',
            imgurl: 'icon-zhuanfa',
        },
        {
            name: '收货地址',
            path: '/pages/deliveryAddress/deliveryAddress?pageUrl=/pages/mine/mine',
            imgurl: 'icon-dizhibu',
        },
        {
            name: '积分明细',
            path: '/pages/integralDetails/integralDetails',
            imgurl: 'icon-jifen1',
        },
        {
            name: '许愿池',
            path: '/pages/treviFountain/treviFountain',
            imgurl: 'icon-xuyuanchi',
        },
        {
            name: '许愿列表',
            path: '/pages/treviFountainList/treviFountainList',
            imgurl: 'icon-jieshao',
        },
        // {
        //     name: '个人档案',
        //     path: '/pages/personalFiles/personalFiles',
        //     imgurl: 'icon-gerendangan',
        // },
        
        // {
        //     name: '客服',
        //     path: '',
        //     imgurl: 'icon-kefuzhongxin',
        // },
    ])
    const itemList = reactive([
        // {
        //     name: '胤春旅居',
        //     path: '',
        //     imgurl: 'icon-icon_lvju',
        //     // imgurl: '/static/mine/customerService.png',
        //     rightText: '退休生活规划师',
        // },
        {
            name: '客服',
            path: '',
            imgurl: 'icon-kefuzhongxin',
            // imgurl: '/static/mine/customerService.png',
            rightText: '拨打客服电话',
        },
        {
            name: '退出登录',
            path: '',
            imgurl: 'icon-tuichu',
            // imgurl: '/static/mine/exit.png',
            rightText: '退出重新登录',
        },
    ])
    onLoad(() => {
        if ((!uni.getStorageSync('token') && !uni.getStorageSync('storagePhone'))) {
            let pages = getCurrentPages()
            let url = pages[pages.length - 1].route
            uni.reLaunch({
                url: "/pages/login/login?url=/" + url
            })
        }
        createInvitationCodeApi().then((res: any) => {
            if (res.code == 200) {
                uni.setStorageSync('myInvitationCode', res.data.code)
                qrcodeImg.value = res.data.imgUrl
            }
        })
    })
    onReady(() => {
        
    })
    onShow(() => {
        wxUserInfoApi({}).then((res: any) => {
            if (res.code == 200) {
                integral.value = res.data.zwu_jifen
                if (Number(integral.value) >= 0 && Number(integral.value) <= 1000) {
                    integralImg.value = 'https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-bronze.png'
                    integralText.value = '青铜会员'
                } else if (Number(integral.value) >= 1000 && Number(integral.value) <= 10000) {
                    integralImg.value = 'https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-silver.png'
                    integralText.value = '白银会员'
                } else if (Number(integral.value) >= 10000 && Number(integral.value) <= 100000) {
                    integralImg.value = 'https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-gold.png'
                    integralText.value = '黄金会员'
                } else {
                    integralImg.value = 'https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/mine/medals-platinum'
                    integralText.value = '铂金会员'
                }
                // qrcodeUrl.value = res.data.zic_invitation_url
            }
        })
    })
    onShareAppMessage((res) => {
        return {
            title: '救道转运',
            path: '/pages/index/index?invitationCode=' + uni.getStorageSync('myInvitationCode')
        }
    }),
    onShareTimeline(() => {
        return {
            // title: '救道转运', //当前小程序名称
            query: 'invitationCode=' + uni.getStorageSync('myInvitationCode')
        }
    })
    const routerPush = (val: any) => {
        console.log(val)
        if (val.name == '客服') {
            uni.makePhoneCall({
            	phoneNumber: '4008897120',
                success: () => {
                    console.log('成功')
                },
                fail: () => {
                    console.log('失败')
                },
                complete: () => {
                    console.log('一定走')
                }
            })
        } else if (val.name == '邀请') {
           popup1.value.open()
           // nextTick(() => {
           //     qrcode.value.make({
           //         success: () => {
           //             console.log('生成成功');
           //         },
           //         fail: err => {
           //             console.log(err)
           //         }
           //     });
           // })
        } else if (val.name == '退出登录') {
            uni.removeStorageSync('token')
            uni.removeStorageSync('storagePhone')
            let pages = getCurrentPages()
            let url = pages[pages.length - 1].route
            uni.reLaunch({
                url: "/pages/login/login?url=/" + url
            })
        } else if (val.name == '胤春旅居') {
          uni.navigateToMiniProgram({
            appId: 'wx615df38a95f21e55',
            path: 't/1.html',
            success(res) {
              // 打开成功
            }
          })
        } else {
            uni.navigateTo({
                url: val.path
            })
        }
    }
    const saveImageToPhotosAlbum = () => {
        // qrcode为组件的ref名称
        // qrcode.value.save({
        //     success: res => {
        //         console.log(res);
        //     }
        // });
        uni.getImageInfo({
            src: qrcodeImg.value,
            success: function (res) {
                console.log(res);
                uni.saveImageToPhotosAlbum({
                    filePath: res.path,
                    success: function () {
                        console.log('save success');
                        popup1.value.close()
                        uni.showToast({
                             title: '保存成功',
                             icon: 'none',
                             mask: true,
                        });
                    },
                    fail: function () {
                        console.log('save fail');
                        uni.showToast({
                             title: '保存异常',
                             icon: 'error',
                             mask: true,
                        });
                    },
                });
            },
            fail: function () {
                console.log('save fail');
                uni.showToast({
                     title: '保存异常',
                     icon: 'error',
                     mask: true,
                });
            },
        })
        
    }
</script>

<style lang="scss" scoped>
    .mine {
        padding: 10rpx;
        box-sizing: border-box;
        width: 100%;
        height: 100vh;
        background: #f2f2f2;
    }
    .header {
        display: flex;
        align-items: center;
        .img-1 {
            width: 100rpx;
            height: 100rpx;
        }
        .header-phone {
            font-weight: bold;
            padding-left: 20rpx;
        }
    }
    .box-1 {
        margin-top: 20rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .box-2 {
        margin-top: 20rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        background-color: #fff;
        overflow: hidden;
        .icon-3 {
            font-size: 40rpx;
            color: rgb(2, 62, 158);
            margin-right: 18rpx;
        }
    }
    .function-item-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        .function-item-box-text-1 {
            color: rgb(133, 144, 156);
            padding-top: 10rpx;
        }
        .img-2 {
            width: 50rpx;
            height: 50rpx;
        }
        .icon-2 {
            font-size: 50rpx;
            color: rgb(2, 62, 158)
        }
    } 
    .btn-text {
        position: initial;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: content-box;
        font-size: 28rpx;
        line-height: 28rpx;
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0);
        &::after {
            border: 0;
        }
    }
    .box-3 {
        height: 80rpx; 
        background: #fff; 
        display: flex; 
        align-items: center; 
        border-radius: 20rpx; 
        box-sizing: border-box; 
        padding-left: 30rpx; 
        color: #6b7279; 
        font-size: 28rpx;
        .img-3 {
            width: 40rpx;
            height: 40rpx;
        }
        .box-3-text-1 {
            margin-right: 10rpx;
        }
    }
    .my-popup-box-1 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        width: 600rpx; 
        height: 750rpx; 
        box-sizing: border-box; 
        border-radius: 40rpx;
        overflow: hidden;
        .img-4 {
            width: 85%;
            height: 85%;
        }
        .my-popup-box-1-title {
            font-size: 40rpx;
            font-weight: bold;
            // padding-bottom: 20rpx;
        }
        .my-popup-box-1-text {
            font-size: 28rpx;
            // padding-top: 20rpx;
        }
    }
    .my-popup-box-2 {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-2-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-2-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-2-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            .my-popup-box-2-content-text-1 {
                padding-bottom: 20rpx;
                display: flex;
                align-items: center;
                .my-popup-box-2-content-text-1-img {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .my-popup-box-2-content-text-bottom-border {
                border-bottom: 1rpx solid #d8c7c7; 
                margin-bottom: 10rpx
            }
        }
    }
</style>
